<template>
    <view class="goods_detail fullpage-min bg-f5 pos-relative">
        <z-swiper bgColor='#999' topTextKey="topTip" :height="260" @clickItem="toSwiper($event)"></z-swiper>
        <view class="goods-info bg-ff color-3 size-32 p-20   ">
            <view class="flex-row jc-between ai-center ">
                <view class="flex-colum">
                    <view class="title omit">
                        {{info.name}}
                    </view>
                    <view class="price p-top-20 p-botoom-20 size-28 font-bold" style="color: #F82727;">
                        <text class="size-36 font-bold m-right-10">￥{{info.price}}</text>起
                    </view>

                </view>
                <g-button type="primary" round size="mini" @click="$f.jumpUrl('/pagesGoods/goods/edit')">编辑商品</g-button>
            </view>
            <!--  <view class="size-24 color-6 flex-row jc-between bg-ff ">
                <text class="text-left">月销量：{{info.seller_count}}</text>
                <text class="text-center">好评率：{{info.favorable_rate*100}}%</text>
                 <text class="text-right" v-if="info.comments">评价：{{info.comments.length}}</text>
            </view> -->
        </view>
        <u-gap height="20"></u-gap>
        <view class="main p-20 bg-ff">
            <view class="title p-left-20 size-32">
                库存管理
            </view>
            <text-block :content="goods_count"></text-block>
        </view>
        <u-gap height="20"></u-gap>
        <view class="main p-20 bg-ff">
            <view class="title p-left-20 size-32">
                销量管理
            </view>
            <qiun-data-charts type="mix" :chartData="singelGoods" :reshow="delayload" :canvas2d="isCanvas2d"
                canvasId="one_b" :opts="{yAxis:{data:[{title: ''}]}}" />
        </view>
        <u-gap height="20"></u-gap>
        <view class="main p-20 bg-ff">
            <view class="title p-left-20 size-32">
                评价管理
            </view>
            <text-block :content="goods_comments"></text-block>
        </view>
        <u-gap height="140"></u-gap>
        <view class="btn-area pos-fixed flex-row jc-between ai-center p-20 bg-ff size-24">
            <view class="flex-colum jc-center ai-center" @click="clickBtn(1)">
                <image src="../../static/replenish.png" style="width: 64rpx;height: 64rpx;" mode=""></image>
                <text class="m-top-10"> 补货</text>
            </view>
            <view class="flex-colum jc-center ai-center" @click="clickBtn(2)">
                <image src="../../static/added.png" style="width: 64rpx;height: 64rpx;" mode=""></image>
                <text class="m-top-10">上架</text>
            </view>
            <!-- <view>下架</view> -->
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                info: {
                    id: 2,
                    type: 1,
                    name: '大白菜',
                    num: 1,
                    seller_count: 18,
                    favorable_rate: 0.8,
                    comments: [1, 2, 3, 4, 5, 6, 7, 8],
                    goods_value: '其帮薄甜嫩，营养丰富、味道甘甜，价格比普通白菜略高；富含维生素和硒，且叶绿素含量较高，具有丰富的营养价值，还含有丰富的纤维素及微量元素',
                    imageUrl: '/static/goods/01.jpg',
                    price: '8.00',
                    dis_price: '6.00',
                    swiper: [{
                        imageUrl: '/static/goods/01.jpg',
                        imageUrl: '/static/goods/02.jpg',
                        imageUrl: '/static/goods/03.jpg',
                    }],
                },
                singelGoods: this.simulated.singelGoods_sales,
                goods_count: this.simulated.goods_count,
                goods_comments: this.simulated.goods_comments,
                delayload: false,
                isCanvas2d: this.$f.ISCANVAS2D,
            }
        },
        methods: {
            clickBtn(e) {
                switch (e) {
                    case 1:
                        this.$f.toast('您点击了补货按钮')
                        break;
                    case 2:
                        this.$f.toast('您点击了上架按钮')
                        break;
                    default:
                        break;
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .goods_detail {
        .main {
            .title {
                border-left: 10rpx solid #666;
            }
        }

        .btn-area {
            left: 0;
            right: 0;
            bottom: 0;

            view {
                width: 50%;
                color: $color-theme;
            }
        }
    }
</style>
